<template>
	<view class="container" :style="{backgroundImage:'url('+select_bg+')'}"
		style="background-size: 100%;background-position: center top;display: flex;flex-direction: column;">
		<navigationBar :myProperty="propertyInfo"></navigationBar>
		<view style="height: 392rpx;"></view>
		<view class="center-box" v-show="!hasDefaultAddress">
			<view class="form-box">
				<view class="title">收货人</view>
				<input type="text" v-model="where.contactName" class="form-input" placeholder="请输入收货人" maxlength="12" />
			</view>
			<view class="form-box">
				<view class="title">手机号</view>
				<input type="text" v-model="where.contactPhone" class="form-input" placeholder="请输入手机号"
					maxlength="11" />
			</view>
			<view class="form-box">
				<view class="title">城市</view>
				<view class="flex-around">
					<picker @change="bindChangeProvince" :value="indexPro" :range="proList" range-key="extName">
						<view class="f-city">
							<view style="width: 150rpx;" class="limit-text-single-line">{{where.provinceName||'请选择'}}
							</view>
							<image :src="select_jt" mode="" class="select-jt"></image>
						</view>
					</picker>
					<picker @change="bindChangeCity" :value="indexCity" :range="cityList" range-key="extName">
						<view class="f-city">
							<view style="width: 150rpx;" class="limit-text-single-line">{{where.cityName||'请选择'}}
							</view>
							<image :src="select_jt" mode="" class="select-jt"></image>
						</view>
					</picker>
					<picker @change="bindChangeArea" :value="indexArea" :range="areaList" range-key="extName">
						<view class="f-city">
							<view style="width: 150rpx;" class="limit-text-single-line">{{where.districtName||'请选择'}}
							</view>
							<image :src="select_jt" mode="" class="select-jt"></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="form-box">
				<view class="title">详细地址</view>
				<textarea type="text" v-model="where.detailedAddress" class="form-input"
					style="height: 100%;min-height: 203rpx;padding: 19rpx 30rpx;box-sizing: border-box;"
					:auto-height="true" placeholder="请输入详细地址" maxlength="50" />
			</view>
			<view style="height: 102rpx;"></view>
			<image :src="btn_confirm" mode="" class="ml-next" @click="next"></image>
		</view>
		<view class="center-box" v-show="hasDefaultAddress">
			<view class="s-title">请确认您的收货地址</view>
			<view class="address-info-bg" :style="{backgroundImage:'url('+address_info_bg+')'}">
				<view class="aib-name">收件人： <span>{{where.contactName}}</span></view>
				<view class="aib-name">手机号： <span>{{where.contactPhone}}</span></view>
				<view class="aib-name">详细地址：
					<span>{{where.provinceName+where.cityName+where.districtName}}{{where.detailedAddress}}</span>
				</view>
			</view>
			<view class="flex-around" style="margin-top: 155rpx;">
				<view class="xg-t flex-cc" @click="modify" v-if="isHasModifyBtn">修改</view>
				<view class="xg-t flex-cc" @click="confirm">确定</view>
			</view>
			<view
				style="width: 100%;text-align: center;font-size: 24rpx;color: #723F60;line-height: 33rpx;letter-spacing: 2rpx;margin-top: 20rpx;">
				请点击确定按钮,确认使用该地址</view>
		</view>
	</view>
</template>

<script>
	import {
		rtrim
	} from 'validator'
	import {
		get_site_list,
		address_add,
		defaultShippingAddress
	} from '@/common/api/index_api.js'
	export default {
		data() {
			return {
				where: {
					contactName: '',
					contactPhone: '',
					province: '',
					city: '',
					district: '',
					detailedAddress: '',
					provinceName: '',
					cityName: '',
					districtName: ''
				},
				indexPro: 0,
				indexCity: 0,
				indexArea: 0,
				proList: [],
				cityList: [],
				areaList: [],
				select_bg: this.$imgWxkjUrl + '/product/address/select_bg.png',
				address_info_bg: this.$imgWxkjUrl + '/product/address/address_info_bg.png',
				btn_confirm: this.$imgWxkjUrl + '/product/address/btn_confirm.png',
				select_jt: this.$imgWxkjUrl + '/product/address/select_jt.png',
				propertyInfo: {
					"bg_color": "transparent",
					"color": "#333",
					"flag": 1,
					"name": "我的收货地址",
					"hasEntity": false,
				},
				shareData: {
					title: '定制我的脉轮水晶',
					path: '/pages/index/index?userType=mailun',
					imageUrl: this.$imgWxkjUrl + '/product/mailun_share_new_new.png'
				},
				hasDefaultAddress: false,
				merchandiseReportId: '',
				isHasModifyBtn: false,
				isFirstAddAddress: '',
				oldAddress: null
			}
		},
		onLoad(options) {
			this.merchandiseReportId = options.reportId
			if (options.isFirstAddAddress) {
				this.isFirstAddAddress = options.isFirstAddAddress
			}
			defaultShippingAddress().then(res => {
				res = res.data
				if (res.data) {
					this.where = res.data
					this.oldAddress = JSON.stringify(this.where);
					this.getHasList('province', '');
					this.getHasList('city', this.where.province);
					this.getHasList('area', this.where.city);
					this.hasDefaultAddress = true
					if (this.isFirstAddAddress == 'Y') {
						this.isHasModifyBtn = true
					}
				} else {
					this.getList('province', '');
				}
			})
		},
		methods: {
			modify() {
				this.hasDefaultAddress = false
			},
			confirm() {
				if (!this.where.contactName) {
					this.$showToast('请输入姓名')
					return
				}
				if (!this.where.contactPhone || this.where.contactPhone.length != 11) {
					this.$showToast('请输入正确的手机号')
					return
				}
				if (!this.where.detailedAddress) {
					this.$showToast('请输入详细地址')
					return
				}
				if (!this.where.province || !this.where.city || !this.where.district) {
					this.$showToast('请选择城市');
					return
				}
				if (this.$fangBaoClick()) return
				if (this.oldAddress && this.oldAddress === JSON.stringify(this.where)) {
					uni.navigateBack();
					uni.$emit('updateMaiLunAddress', this.where.id)
				} else {
					this.where.id = ''
					address_add(this.where).then(res => {
						res = res.data;
						if (res.code == 200) {
							this.where.id = res.data
							uni.navigateBack();
							uni.$emit('updateMaiLunAddress', this.where.id)
						} else {
							this.$showToast(res.message)
						}
					})
				}

			},
			getHasList(type, id) {
				get_site_list({
					id: id
				}).then(res => {
					res = res.data
					if (type == 'province') {
						this.proList = res.data
						this.indexPro = this.proList.findIndex(item => item.id == Number(this.where.province))
						console.log(this.indexPro, '------------------省')
						this.where.provinceName = this.proList[this.indexPro].extName
					} else if (type == 'city') {
						this.cityList = res.data
						this.indexCity = this.cityList.findIndex(item => item.id == Number(this.where.city))
						console.log(this.indexCity, '------------------城市')
						this.where.cityName = this.cityList[this.indexCity].extName
					} else if (type == 'area') {
						this.areaList = res.data
						this.indexArea = this.areaList.findIndex(item => item.id == Number(this.where.district))
						console.log(this.indexArea, '------------------区')
						this.where.districtName = this.areaList[this.indexArea].extName
					}
				})
			},
			getList(type, id) {
				get_site_list({
					id: id
				}).then(res => {
					res = res.data
					if (type == 'province') {
						this.proList = res.data
						this.where.province = '';
						this.where.provinceName = ''
						this.indexPro = 0
						this.getList('city', this.proList[this.indexPro].id)
					} else if (type == 'city') {
						this.cityList = res.data
						this.where.city = '';
						this.where.cityName = ''
						this.indexCity = 0
						this.getList('area', this.cityList[this.indexCity].id)
					} else if (type == 'area') {
						this.areaList = res.data
						this.where.district = '';
						this.where.districtName = ''
						this.indexArea = 0
					}
				})
			},
			bindChangeProvince(e) {
				this.indexPro = e.detail.value;
				this.where.provinceName = this.proList[this.indexPro].extName
				this.where.province = this.proList[this.indexPro].id
				this.getList('city', this.proList[this.indexPro].id)
			},
			bindChangeCity(e) {
				this.indexCity = e.detail.value;
				this.where.cityName = this.cityList[this.indexCity].extName
				this.where.city = this.cityList[this.indexCity].id
				this.getList('area', this.cityList[this.indexCity].id)
			},
			bindChangeArea(e) {
				this.indexArea = e.detail.value;
				this.where.districtName = this.areaList[this.indexArea].extName
				this.where.district = this.areaList[this.indexArea].id
			},
			next() {
				if (!this.where.contactName) {
					this.$showToast('请输入姓名')
					return
				}

				if (!this.where.contactPhone || this.where.contactPhone.length != 11) {
					this.$showToast('请输入正确的手机号')
					return
				}
				if (!this.where.detailedAddress) {
					this.$showToast('请输入详细地址')
					return
				}
				if (!this.where.province || !this.where.city || !this.where.district) {
					this.$showToast('请选择城市');
					return
				}
				this.hasDefaultAddress = true
				this.isHasModifyBtn = true
				// uni.navigateTo({
				// 	url: '/subcontractorMaiLun/pages/startMaiLun/startMaiLun?sclId=' + this.sclId
				// })
			}
		}
	}
</script>

<style lang="scss">
	.address-info-bg {
		width: 700rpx;
		height: 700rpx;
		background-size: 100% 100%;
		padding: 81rpx 108rpx;
		box-sizing: border-box;
		margin-top: 50rpx;
	}

	.s-title {
		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #2E3670;
		line-height: 50rpx;
		text-align: center;
	}

	.xg-t {
		width: 319rpx;
		height: 100rpx;
		background: linear-gradient(180deg, #8BE4FE 0%, #25C7EC 100%);
		border-radius: 63rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.aib-name {
		width: 100%;
		font-size: 32rpx;
		color: #2E3670;
		line-height: 45rpx;
		text-align: justify;
		margin-bottom: 60rpx;
		word-break: break-all;
		white-space: pre-wrap;
	}



	.form-box {
		margin-bottom: 50rpx;

		.title {
			font-size: 32rpx;
			color: #2E3670;
			line-height: 45rpx;
		}

		.form-input {
			width: 670rpx;
			height: 84rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 1rpx solid #BBAADC;
			font-size: 32rpx;
			color: #2E3670;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			margin-top: 19rpx;
		}
	}

	.f-city {
		width: 214rpx;
		height: 84rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid #BBAADC;
		font-weight: bold;
		font-size: 32rpx;
		color: #2E3670;
		padding: 19rpx 30rpx;
		box-sizing: border-box;
		margin-top: 19rpx;
		position: relative;
	}

	.select-jt {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.center-box {
		width: 100%;
		height: 100%;
		flex: 1;
		background: rgba(255, 255, 255, 0.53);
		border-radius: 49rpx 49rpx 0px 0px;
		backdrop-filter: blur(28rpx);
		padding: 49rpx 40rpx;
		box-sizing: border-box;
		position: relative;
	}

	.ml-next {
		width: 515rpx;
		height: 100rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 70rpx;
	}
</style>